<template>
  <div class="seArch">
    <van-search
      v-model="searchValue"
      show-action
      background="#3296fa"
      @input="searchLenovo"
      @search="onSubmit"
    >
      <template #action>
        <div class="myAction" @click="onCancel">取消</div>
      </template>
    </van-search>
    <div class="content" v-if="iscontent">
      <van-cell title="历史记录">
        <template #right-icon>
          <van-icon class="mydelete" name="delete-o" @click="removeAll" />
        </template>
      </van-cell>
      <div class="record" v-if="keywordsList.length">
        <van-cell-group v-for="(item, index) in keywordsList" :key="index">
          <van-cell icon="search" :title="item" @click="toLenovo(item)">
            <template #right-icon>
              <van-icon name="cross" @click.stop="removeItem(index)" />
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
    <div class="lenovo" v-else-if="iscontent === false">
      <van-cell title="猜你想搜"></van-cell>
      <div class="related" v-if="options.length">
        <van-cell-group
          v-for="(item, index) in options"
          :key="index"
          @click="toResult(item)"
        >
          <van-cell icon="search" :title="item"></van-cell>
        </van-cell-group>
      </div>
      <div class="nomove" v-else>暂时没有相关推荐</div>
    </div>
  </div>
</template>

<script>
// 导入网络请求模块
import { getLenovo } from '../../../api/search'
export default {
  name: 'search',
  data () {
    return {
      // 显示历史内容 与猜你想搜
      iscontent: true,
      // 搜索内容
      searchValue: '',
      // 联想内容
      options: [],
      // 搜索历史数据,
      keywordsList: []
    }
  },
  // 生命周期钩子渲染历史记录
  created () {
    this.keywordsList =
      JSON.parse(window.localStorage.getItem('keywordsList')) || []
  },
  methods: {
    // 点击历史跳转事件
    toLenovo (item) {
      // console.log(item)
      this.$router.push(`/searchResult/${item}`)
      // 把每次输入框的内容添加到数据
      this.keywordsList.unshift(item)
      this.keywordsList = [...new Set(this.keywordsList)]
    },
    // 点击删除全部历史记录
    removeAll () {
      this.$dialog
        .confirm({
          title: '提示',
          message: '是否删除所有历史记录'
        })
        .then(async () => {
          window.localStorage.removeItem('keywordsList')
          this.keywordsList =
            JSON.parse(window.localStorage.getItem('keywordsList')) || []
        })
        .catch(() => {
          // on cancel
        })
    },
    // 点击删除此条数据
    removeItem (index) {
      console.log(index)
      this.keywordsList.splice(index, 1)
      window.localStorage.setItem(
        'keywordsList',
        JSON.stringify(this.keywordsList)
      )
    },
    // 点击取消事件
    onCancel () {
      if (this.iscontent) {
        this.$router.push('/home')
      } else {
        this.iscontent = true
        this.options = []
        this.searchValue = ''
      }
    },
    // 搜索联想事件
    async searchLenovo () {
      // 判断是否为空  如果不为空则发起判断
      if (this.searchValue !== '') {
        const res = await getLenovo(this.searchValue)
        this.options = res.data.data.options
        // console.log(this.options)
        this.iscontent = false
      } else {
        this.iscontent = true
      }
    },
    // 搜索框点击事件
    async onSubmit () {
      // 把每次输入框的内容添加到数据
      this.keywordsList.unshift(this.searchValue)
      this.keywordsList = [...new Set(this.keywordsList)]
      // 将历史纪录保存起来
      window.localStorage.setItem(
        'keywordsList',
        JSON.stringify(this.keywordsList)
      )
      // 跳转并且复原页面
      this.$router.push(`/searchResult/${this.searchValue}`)
      this.iscontent = true
      this.options = []
      this.searchValue = ''
    },
    // 点击联想跳转搜索结果页面
    toResult (item) {
      // console.log(item)
      this.keywordsList.unshift(item)
      window.localStorage.setItem(
        'keywordsList',
        JSON.stringify(this.keywordsList)
      )
      // 跳转并且复原页面
      this.$router.push(`/searchResult/${item}`)
      this.iscontent = true
      this.options = []
      this.searchValue = ''
    }
  }
}
</script>

<style lang="less" scoped>
.seArch {
  .myAction {
    color: #ffff;
  }
  .content {
    .mydelete {
      font-size: 18px;
      color: #999999;
    }
  }
  .lenovo {
    .nomove {
      margin-top: 10px;
      text-align: center;
      color: #ccc;
      font-size: 16px;
    }
  }
}
</style>
